import React, { Component } from "react";
import axios from "axios";
import "./goodsList.css";
import { Form, Input, Table, Button, Modal, message } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { observer, inject } from "mobx-react";
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
};
@inject("hp")
@observer
class GoodsList extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
      columns: [
        {
          title: "名称",
          dataIndex: "name",
          key: "name",
          align: "center",
        },
        //   {
        //     title: "图片",
        //     dataIndex: "imageSrc",
        //     key: "imageSrc",
        //   },
        {
          title: "类型",
          dataIndex: "type",
          key: "type",
          align: "center",
        },
        {
          title: "库存",
          dataIndex: "inventory",
          key: "inventory",
          align: "center",
        },
        {
          title: "售价",
          dataIndex: "sPrice",
          key: "sPrice",
          align: "center",
        },
        {
          title: "进价",
          dataIndex: "pPrice",
          key: "pPrice",
          align: "center",
        },
        {
          title: "供货商",
          dataIndex: "merchants",
          key: "merchants",
          align: "center",
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          render: (text, record) => (
            <div>
              <MyButton
                data={record}
                myEdit={this.myEdit}
                myDel={this.myDel}
              ></MyButton>
            </div>
          ),
        },
      ],
      searchText: "",
    };
  }
  // 编辑
  myEdit = (obj) => {
    // console.log(obj.key);
    // console.log(this.state.data)
    let a = [...this.state.data];
    for (let i = 0; i < a.length; i++) {
      if (obj.key === a[i].key) {
        a[i] = obj;
      }
    }
    // console.log(a);
    this.setState({
      data: a,
    });
  };
  // 删除
  myDel = (obj) => {
    // console.log(obj.key);
    // console.log(obj);
    let a = [...this.state.data];
    for (let i = 0; i < a.length; i++) {
      if (obj.key === a[i].key) {
        a.splice(i, 1);
      }
    }
    //   console.log(a)
    this.setState({
      data: a,
    });
  };
  // 查询绑定
  searchTextChange = (e) => {
    this.setState({
      searchText: e.target.value,
    });
  };
  // 查询按钮
  searchBtn = () => {
    axios.defaults.baseURL = "/hp";
    !this.state.searchText
      ? message.warning("查询内容不能为空")
      : axios({
          url: "/selGoods",
          method: "post",
          data: { name: this.state.searchText },
        }).then((res) => {
          if (res.data.length !== 0) {
            message.success("查询成功");
            let data = res.data.filter((item) => {
              item.key = item.id;
              delete item.id;
              return item;
            });
            this.setState({
              data: data,
            });
          } else {
            message.warning("没有该数据");
          }
        });
  };
  // 重置按钮
  resetBtn = () => {
    let { data } = this.props.hp;
    this.setState({
      data: data,
    });
    message.success("已重置");
  };
  async componentDidMount() {
    await this.props.hp.getData();
    const { data } = this.props.hp;
    await this.setState({
      data: data,
    });
  }
  render() {
    return (
      <Table
        pagination={{ pageSize: 8, position: ["bottomCenter"] }}
        columns={this.state.columns}
        dataSource={this.state.data}
        bordered
        title={() => (
          <div style={{ display: "flex", width: "20%" }}>
            <Input
              placeholder="输入姓名以查询"
              onChange={this.searchTextChange}
              value={this.state.searchText}
              onPressEnter={this.searchBtn}
            />
            <Button onClick={this.searchBtn}>查询</Button>
            <Button onClick={this.resetBtn}>重置</Button>
          </div>
        )}
      />
    );
  }
}
const myButtonStyle = {
  display: "flex",
  flexDirection: "row",
  width: "60%",
  justifyContent: "space-around",
  margin: "auto",
};
class MyButton extends Component {
  state = {
    visible: false, //Modal状态
    obj: {},
  };
  // 编辑获得初始值
  handleEditer = (obj) => {
    // console.log(obj);
    this.setState({
      visible: true,
      obj: obj,
    });
  };
  // 表单提交
  handleOk = () => {
    // console.log(this.state.obj);
    message.success("编辑成功");
    this.props.myEdit(this.state.obj);
    this.setState({
      visible: false,
    });
  };
  // 关闭对话框
  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  };
  onChange = (name, value) => {
    // let a = { ...this.state.obj };
    // a[name] = value;
    let a = Object.assign({}, this.state.obj, { [name]: value });
    // console.log(name, value);
    this.setState({
      obj: a,
    });
  };
  handleChange = (name) => {
    return (e) => this.onChange(name, e.target.value);
  };
  // 删除
  confirm = (obj) => {
    Modal.confirm({
      title: "删除",
      icon: <ExclamationCircleOutlined />,
      content: "删除后不可恢复，是否确认删除！",
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        message.success("删除成功");
        // console.log(obj)
        this.props.myDel(obj);
      },
    });
  };
  render() {
    return (
      <div style={myButtonStyle}>
        <Button
          onClick={this.handleEditer.bind(this, this.props.data)}
          size="small"
          type="primary"
        >
          编辑
        </Button>
        <Button
          onClick={this.confirm.bind(this, this.props.data)}
          size="small"
          type="danger"
        >
          删除
        </Button>
        <Modal
          title="编辑"
          visible={this.state.visible}
          onOk={this.handleOk.bind(this, this.props)}
          onCancel={this.handleCancel}
          okText="确认"
          cancelText="取消"
        >
          <Form
            {...layout}
            name="nest-messages"
            // onFinish={onFinish}
          >
            <Form.Item label="商品名称">
              <Input
                value={this.state.obj.name}
                onChange={this.handleChange("name")}
              />
            </Form.Item>
            <Form.Item label="商品类型">
              <Input
                value={this.state.obj.type}
                onChange={this.handleChange("type")}
              />
            </Form.Item>
            <Form.Item label="商品库存">
              <Input
                value={this.state.obj.inventory}
                onChange={this.handleChange("inventory")}
              />
            </Form.Item>
            <Form.Item label="商品售价">
              <Input
                value={this.state.obj.sPrice}
                onChange={this.handleChange("sPrice")}
              />
            </Form.Item>
            <Form.Item label="商品进价">
              <Input
                value={this.state.obj.pPrice}
                onChange={this.handleChange("pPrice")}
              />
            </Form.Item>
            <Form.Item label="供货商">
              <Input
                value={this.state.obj.merchants}
                onChange={this.handleChange("merchants")}
              />
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
}

export default GoodsList;
